import 'package:banyou_app/app/config/colors.dart';
import 'package:banyou_app/app/routes/app_pages.dart';
import 'package:banyou_app/app/util/common_utils.dart';
import 'package:banyou_app/app/widget/app_bar_widget.dart';
import 'package:banyou_app/app/widget/load_network_image_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:get/get.dart';

import '../controllers/jingdianxiangqing_controller.dart';

class JingdianxiangqingView extends GetView<JingdianxiangqingController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
              child: Image.asset(
            'assets/images/背景@2x.png',
            width: 1.sw,
            height: 1.sh,
            fit: BoxFit.cover,
          )),
          Obx(() => controller.info.isEmpty
              ? Container()
              : Positioned(
                  top: 0,
                  left: 0,
                  right: 0,
                  height: 1.sw * 264 / 378,
                  child: LoadNetworkImageWidget(
                      fit: BoxFit.cover,
                      height: double.infinity,
                      imageUrl: controller.info['PictureUrl'] ?? ""),
                )),
          Obx(() => controller.info.isEmpty
              ? Container()
              : Positioned.fill(
                  child: SingleChildScrollView(
                    child: Container(
                      child: Column(
                        children: [
                          SizedBox(height: ScreenUtil().statusBarHeight),
                          SizedBox(height: 150),
                          Container(
                            clipBehavior: Clip.hardEdge,
                            decoration: BoxDecoration(
                              color: ColorConfig.white,
                              borderRadius: BorderRadius.vertical(
                                  top: Radius.circular(20)),
                            ),
                            child: Column(
                              children: [
                                Container(
                                  width: 1.sw,
                                  padding: EdgeInsets.symmetric(
                                      vertical: 16, horizontal: 14),
                                  color: ColorConfig.white,
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Row(
                                        children: [
                                          Expanded(
                                            child: Text(
                                              controller.info['Title'] ?? "",
                                              style: TextStyle(
                                                  fontSize: 22.sp,
                                                  fontWeight: FontWeight.bold,
                                                  color:
                                                      ColorConfig.text_label),
                                            ),
                                          ),
                                          Stack(
                                            children: [
                                              Image.asset(
                                                  'assets/images/组 536@2x.png',
                                                  width: 40,
                                                  height: 40,
                                                  fit: BoxFit.cover),
                                              Positioned.fill(
                                                child: Column(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.center,
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.center,
                                                  children: [
                                                    Text(
                                                      '99',
                                                      style: TextStyle(
                                                          fontSize: 12,
                                                          fontWeight:
                                                              FontWeight.bold,
                                                          color: Color(
                                                              0xFFFFBB00)),
                                                    ),
                                                    Text(
                                                      '热度',
                                                      style: TextStyle(
                                                          fontSize: 8,
                                                          fontWeight:
                                                              FontWeight.bold,
                                                          color: ColorConfig
                                                              .text_label),
                                                    ),
                                                  ],
                                                ),
                                              )
                                            ],
                                          )
                                        ],
                                      ),
                                      SizedBox(height: 10),
                                      Row(
                                        children: [
                                          Expanded(
                                            child: Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.start,
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                Text(
                                                  controller
                                                          .info['Selection'] ??
                                                      "",
                                                  style: TextStyle(
                                                      fontSize: 16.sp,
                                                      color: ColorConfig
                                                          .text_label),
                                                ),
                                                // SizedBox(width: 3),
                                                // Text(
                                                //   '迪丽热巴',
                                                //   style: TextStyle(
                                                //       fontSize: 14.sp,
                                                //       color: Color(0xFF959595)),
                                                // ),
                                              ],
                                            ),
                                          ),
                                          InkWell(
                                            child: Container(
                                              width: 95,
                                              height: 35,
                                              decoration: BoxDecoration(
                                                gradient: LinearGradient(
                                                    begin: Alignment.centerLeft,
                                                    end: Alignment.centerRight,
                                                    colors: [
                                                      Color(0xFFF52EC5),
                                                      Color(0xFFFF8A33),
                                                    ]),
                                                borderRadius:
                                                    BorderRadius.circular(5),
                                              ),
                                              child: Center(
                                                child: Text(
                                                  "想去",
                                                  style: TextStyle(
                                                      color: ColorConfig.white,
                                                      fontSize: 16,
                                                      fontWeight:
                                                          FontWeight.w500),
                                                ),
                                              ),
                                            ),
                                            onTap: () {
                                              String key =
                                                  box.read("key") ?? "";
                                              if (key.isEmpty) {
                                                Get.offAllNamed(Routes.LOGIN);
                                              } else {
                                                EasyLoading.show();
                                                Future.delayed(
                                                    Duration(seconds: 2), () {
                                                  EasyLoading.dismiss();
                                                  EasyLoading.showToast('操作成功');
                                                  Get.back(result: 1);
                                                });
                                              }
                                            },
                                          ),
                                        ],
                                      )
                                    ],
                                  ),
                                ),
                                Container(
                                    height: 10,
                                    width: 1.sw,
                                    color: Color(0xFFF5F7F9)),
                                ListView.separated(
                                    padding: EdgeInsets.zero,
                                    shrinkWrap: true,
                                    physics: NeverScrollableScrollPhysics(),
                                    itemBuilder: (c, i) {
                                      return itemWidget(
                                          controller.info['Comments'][i]);
                                    },
                                    separatorBuilder: (c, i) {
                                      return Container(
                                        color: Color(0xFFF5F7F9),
                                        height: 1,
                                      );
                                    },
                                    itemCount:
                                        (controller.info['Comments'] ?? [])
                                            .length),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                )),
          Positioned(
            top: 20,
            left: 0,
            right: 0,
            height: 60,
            child: AppBarWidget(
              backgroundColor: Colors.transparent,
            ),
          ),
        ],
      ),
    );
  }

  itemWidget(item) {
    List labels = item['Labels'] ?? [];
    return Container(
      padding: EdgeInsets.symmetric(vertical: 20, horizontal: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipOval(
            child: LoadNetworkImageWidget(
                fit: BoxFit.cover,
                height: 40,
                width: 40,
                imageUrl: item['UserAvatar'] ?? ""),
          ),
          SizedBox(width: 20),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  child: Row(
                    children: [
                      Text(
                        item['UserName'] ?? "",
                        style: TextStyle(
                            fontSize: 18.sp,
                            fontWeight: FontWeight.bold,
                            color: ColorConfig.text_label),
                      ),
                      SizedBox(width: 3),
                      item['UserSex'] == '女'
                          ? Container(
                              padding: EdgeInsets.symmetric(horizontal: 3),
                              decoration: BoxDecoration(
                                color: Color(0xFFF8DCEC),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(8)),
                              ),
                              child: Row(
                                children: [
                                  Image.asset(
                                    'assets/images/女@2x.png',
                                    width: 18,
                                  ),
                                  SizedBox(width: 5),
                                  Text('${item['UserAge'] ?? ""}',
                                      style: TextStyle(
                                          fontSize: 10.sp,
                                          color: Color(0xFFEB6DAF))),
                                ],
                              ),
                            )
                          : Container(
                              padding: EdgeInsets.symmetric(horizontal: 3),
                              decoration: BoxDecoration(
                                color: Color.fromARGB(255, 198, 211, 240),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(8)),
                              ),
                              child: Row(
                                children: [
                                  Image.asset(
                                    'assets/images/nan.png',
                                    width: 20,
                                  ),
                                  SizedBox(width: 5),
                                  Text('${item['UserAge'] ?? ""}',
                                      style: TextStyle(
                                          fontSize: 10.sp,
                                          color: Color.fromARGB(
                                              255, 88, 97, 237))),
                                ],
                              ),
                            ),
                      Spacer(),
                      Text(
                        item['Distance'] ?? "",
                        style: TextStyle(
                            fontSize: 12.sp, color: Color(0xFF959595)),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 5),
                Text(
                  item['Content'] ?? "",
                  style:
                      TextStyle(fontSize: 12.sp, color: ColorConfig.text_label),
                ),
                SizedBox(height: 5),
                Container(
                  child: Wrap(
                    children: labels.map((item) => typeWidget(item)).toList(),
                    spacing: 10,
                    runSpacing: 10,
                    alignment: WrapAlignment.start,
                    runAlignment: WrapAlignment.end,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget typeWidget(item) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 5, vertical: 2),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10.r)),
        gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFFEDEDED),
              Color(0xFFEDEDED),
            ]),
      ),
      child: Text(item,
          style: TextStyle(color: ColorConfig.text_label, fontSize: 12.sp)),
    );
  }
}
